<template>
  <div>
    <div class="top">
      <img src="../assets/images/login.png" alt="" />
    </div>
    <div class="center">
      <form>
        <p :class="{ active: active == 1 }">
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入手机号"
            @blur="active = ''"
            @focus="active = 1"
            v-model="form.mobile"
          />
          <span class="code" @click="sendCode" v-if="flag == false"
            >获取验证码</span
          >
          <span class="code" v-if="flag == true">获取验证码{{ timer }}</span>
        </p>
        <p :class="{ active: active == 4 }">
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入短信验证码"
            @blur="active = ''"
            @focus="active = 4"
            v-model="form.sms_code"
          />
        </p>
      </form>
      <div style="color: #999; font-size: 20px" class="alert">
        <p>*未注册的手机号将自动注册</p>
        <p @click="$router.push('/Login')">使用密码登录</p>
      </div>
      <button class="btn" @click="goLogin">登录</button>
    </div>
  </div>
</template>
<script>
const reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
import { smsLogin, goLogin } from "../tool/login";
export default {
  data() {
    return {
      active: "",
      timer: 6,
      flag: false,
      form: {
        mobile: "",
        sms_type: "login",
        sms_code: "",
        type: 2,
        client: 1,
      },
    };
  },
  methods: {
    // 获取验证码
    async sendCode() {
      if (!reg.test(this.form.mobile)) {
        this.$Toast.fail("不是手机号");
      } else {
        this.flag = true;
        let res = await smsLogin(this.form);
        console.log(res);
        let a = setInterval(() => {
          if (this.timer < 2) {
            this.flag = false;
            this.timer = 6;
            clearInterval(a);
          } else {
            this.timer--;
          }
        }, 1000);
      }
    },
    // 登录
    async goLogin() {
      if (reg.test(this.form.mobile) && this.form.sms_code.length >= 6) {
        let res = await goLogin(this.form);
        console.log(res);
        if (res.code == 200) {
          localStorage.setItem("LoginToken", res.data.remember_token);
          if (res.data.is_new == 2) {
            console.log(111);
            this.$router.push({
              name: "/setpassword",
              params: {
                mobile: this.form.mobile,
                sms_code: this.form.sms_code,
              },
            });
          }
          console.log(123456);
        }
      } else {
        this.$Toast("请输入正确的手机号验证码");
      }
    },
    async btnPassword() {
      let res = await Editpassword({});
      console.log(res);
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  text-align: center;
  img {
    width: 525px;
    height: 115px;
    margin: 80px auto;
  }
}
.center {
  padding: 0 80px;
 
  form {
   
    p {
      display: flex;
      justify-content: space-between;
      line-height: 1.33rem;
      font-size: 0.373rem;
      input {
        border: none;
      }
      .code {
        color: #ef8236;
      }
    }
  }
  .alert {
    display: flex;
    justify-content: space-between;
  }
  .btn {
    width: 100%;
    height: 65px;
    line-height: 65px;
    color: white;
    background-color: #fd6613;
    text-align: center;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 50px;
    border: none;
    
  }
}

.active {
  border-bottom: 1px solid #ef8236;
 
}
</style>